$fc: #ffffff;
@import 'setting';
@mixin button($color: #ffffff) {
  background-color: yellow;
  border: 1px solid $color;
}

/*字体颜色*/

@mixin color999() {
  color: $baseColor;
}

@mixin color111() {
  color: $accentColor;
}

@mixin color666() {
  color: $gray;
}

@mixin fontSize($n) {
  font-size: $n/2+PX;
}

@mixin pad($n, $c, $d, $f) {
  padding: $n+PX $c+PX $d+PX $f+PX
}

@mixin textLeng($row:1) {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $row;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

// 背景图片地址和大小
@mixin bis($url) {
  background-image: url($url);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

//定位上
@mixin fixed-top() {
  position: fixed;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  z-index: 10;
}

@mixin fixed-bottom() {
  position: fixed;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  z-index: 10;
}

// 背景图片地址和大小
@mixin opacityBg($op:0.4) {
  background: rgba(0, 0, 0, $op);
}

//定位上下左右居中
@mixin center($left:-50%, $top:-50%, $l:50%, $t:50%) {
  position: absolute;
  top: $t;
  left: $l;
  transform: translate($left, $top);
}

//定位上下居中
@mixin ct {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

//定位左右居中
@mixin cl {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

//宽高
@mixin wh($width, $height) {
  width: $width+px;
  height: $height+px;
}

//字体大小、行高、字体
@mixin font($size, $line-height, $family: 'Microsoft YaHei') {
  font: #{$size}/#{$line-height} $family;
}

//flex 布局和 子元素 对其方式
@mixin fjc($type: space-between) {
  display: flex;
  justify-content: $type;
  align-items: center;
}

//flex 布局和 子元素 对其方式
@mixin ifjc($type: space-between) {
  display: inline-flex;
  justify-content: $type;
  align-items: center;
}

//移动一像素设置
@mixin border-all($color:$lineColor, $radius:8, $px:1, $line:solid) {
  position: relative;
  &:after {
    content: "";
    pointer-events: none;
    /* 防止点击触发 */
    box-sizing: border-box;
    position: absolute;
    width: 200%;
    height: 200%;
    left: 0;
    top: 0;
    border: $px+PX $line $color;
    /*px*/
    -webkit-transform-origin: 0 0;
    transform: scale(0.5);
    border-radius: $radius+PX;
    transform-origin: 0 0;
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    &:after {
      transform: scale(0.5);
    }
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 3) {
    &:after {
      transform: scale(0.5);
    }
  }
}

@mixin hei-88($center:space-between) {
  height: 88px;
  @include fjc($center);
}

@mixin border-top($color:$lineColor, $px:1PX) {
  position: relative;
  &:after {
    content: "";
    pointer-events: none;
    /* 防止点击触发 */
    box-sizing: border-box;
    position: absolute;
    width: 200%;
    height: 200%;
    left: 0;
    top: 0;
    border-top: $px solid $color;
    /*px*/
    -webkit-transform-origin: 0 0;
    transform: scale(0.5);
    transform-origin: 0 0;
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    &:after {
      transform: scale(0.5);
    }
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 3) {
    &:after {
      transform: scale(0.5);
    }
  }
}

@mixin border-bottom($color:$lineColor, $px:1PX) {
  position: relative;
  &:after {
    content: "";
    pointer-events: none;
    /* 防止点击触发 */
    box-sizing: border-box;
    position: absolute;
    width: 200%;
    height: 200%;
    left: 0;
    top: 0;
    border-bottom: $px solid $color;
    /*px*/
    -webkit-transform-origin: 0 0;
    transform: scale(0.5);
    transform-origin: 0 0;
    z-index: 10;
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    &:after {
      transform: scale(0.5);
    }
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 3) {
    &:after {
      transform: scale(0.5);
    }
  }
}

@mixin border-right($color:$lineColor, $px:1PX) {
  position: relative;
  &:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-right: $px solid $color;
    pointer-events: none;
    /* 防止点击触发 */
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    &:after {
      transform: scale(0.5);
    }
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 3) {
    &:after {
      transform: scale(0.5);
    }
  }
}

@mixin border-left($color:$borderColor, $px:1PX) {
  position: relative;
  &:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-left: $px solid $color;
    /*px*/
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    &:after {
      transform: scale(0.5);
    }
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 3) {
    &:after {
      transform: scale(0.5);
    }
  }
}
